import React, { Component } from 'react';
import { Table, Input, Modal, Form, Icon, Button, message, Popconfirm } from 'antd';
import Http from '../../../utils/http';
import {withRouter} from "react-router-dom";
import {connect} from "dva";

const FormItem = Form.Item;
@connect(({ video }) => ({
    video,
}))
class UserRight extends Component{
    constructor(props){
        super(props)
        this.state={
            dataSource:[],
            total:'',
            visible: false,
        }
        this.http = this.http.bind(this)
    }
    // 获取用户列表
    http=()=>{
        Http('/fcinformation/Privilege/privilegeList','get',{index:'1'})
        .then((res)=>{
            if(res.code === 200){
                this.setState({
                    dataSource: res.data.list,
                    total: res.data.total
                })
            }
            if(res.code === 501){
                // alert('请登陆！')
                this.props.history.push('/login')
            }
            if(res.code === 500){
                message.error(res.msg)
              }
        })
        .catch((err)=>{
            console.log(err)
        })
    }
    componentDidMount(){
        this.http()
    }
    showModal = () => {
        this.setState({
          visible: true,
        });
      }
    //   权限新增
    handleOk = (e) => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
              Http('/fcinformation/Privilege/addPrivilege','post',values)
              .then((res)=>{
                  if(res.code === 200){
                      message.success('权限新增成功！')
                      this.http()
                      this.props.form.resetFields()
                  }
                  if(res.code === 500){
                    message.error(res.msg)
                  }
              })
              .catch((err)=>{
                  console.log(err)
              })
              this.setState({
                visible: false,
              });
            }
        })
      }
      handleCancel = (e) => {
        this.setState({
          visible: false,
        });
      }
    // 删除
    deleteRole=(record)=>{
        Http('/fcinformation/Privilege/deletePrivilege','post',{privilege_id:record.privilege_id})
              .then((res)=>{
                  if(res.code === 200){
                      message.success('权限删除成功！')
                      this.http()
                  }else{
                      message.error(res.msg)
                  }
              })
              .catch((err)=>{
                  console.log(err)
              })
    }
    render(){
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;

        const columns=[{
            title: '权限ID',
            dataIndex: 'privilege_id',
            key: 'privilege_id',
        },{
            title: '权限名称',
            dataIndex: 'privilege_name',
            key: 'privilege_name',
        },{
            title: '权限路由',
            dataIndex: 'privilege_route',
            key: 'privilege_route',
        },{
            title: '操作',
            width:'300px',
            align: 'center',
            render: (record)=>{
                return(
                    <div>
                        <UserRoleChanges record={record} http={this.http}/>

                         <Popconfirm placement="leftTop" title='确定删除？'  icon={null} onConfirm={()=>this.deleteRole(record)} okText="确定" cancelText="取消">
                            <Button type='danger' size='small'>删除</Button>
                        </Popconfirm>

                    </div>
                )
            }
        },]
        return(
            <div className='UserRight userAll'>
                <div className='head'>
                    <p>权限列表</p>
                </div>
                <div className='addUser'>

                    <Button type="primary" style={{marginLeft:'-10px'}} onClick={this.showModal}>新增权限</Button>

                    <Modal
                    title="新增"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText='确认'
                    cancelText= '取消'
                    >
                        <Form layout="inline" onSubmit={this.handleSubmit}>
                            <FormItem
                            label='权限名称'
                            style={{marginBottom:'20px'}}
                            >
                            {getFieldDecorator('privilege_name', {
                                rules: [{ required: true, message: '请输入权限名称!' }],
                            })(
                                <Input style={{width:350}}/>
                            )}
                            </FormItem>
                            <FormItem
                            label='权限地址'
                            >
                            {getFieldDecorator('privilege_route', {
                                rules: [{ required: true, message: '请输入权限地址!' }],
                            })(
                                <Input style={{width:350}}/>
                            )}
                            </FormItem>
                        </Form>
                    </Modal>
                </div>
                <Table columns={columns} dataSource={this.state.dataSource} bordered
                pagination={{
                    total: this.state.total, //数据总数量
                    size: 'small',
                    showQuickJumper: true,
                    pageSize: 5,  //显示几条一页
                    defaultPageSize: 10, //默认显示几条一页
                    showSizeChanger: true,  //是否显示可以设置几条一页的选项
                    // style: {marginRight:'50px'},
                    showTotal: ()=>{  //设置显示一共几条数据
                      return `共有${this.state.total}数据`
                      }
                  }}
                />

            </div>
        )
    }
}
const UserRights = Form.create()(UserRight)
export default withRouter(UserRights)




class UserRoleChange extends Component{
    state = {
        visibleChange: false,
        privilege_id:'',
        privilege_name: '',
        privilege_route:''
    }
     //   修改 model
     showModalChange=()=>{
        // alert(record)
        let record = this.props.record
        this.setState({
            visibleChange: true,
            privilege_id: record.privilege_id,
            privilege_name: record.privilege_name,
            privilege_route: record.privilege_route
          });
          this.props.form.setFieldsValue({
            privilege_name: record.privilege_name,
            privilege_route: record.privilege_route
          });
    }
    handleCancel = (e) => {
        this.setState({
          visibleChange: false
        });
      }
    handleOkChange=()=>{
        this.props.form.validateFields((err, values) => {
            if (!err) {
                values['privilege_id'] = this.state.privilege_id
              Http('/fcinformation/Privilege/updatePrivilege','post',values)
              .then((res)=>{
                  if(res.code === 200){
                      message.success('权限修改成功！')
                      this.props.http()
                      this.props.form.resetFields()
                  }
                  if(res.code === 500){
                    message.error(res.msg)
                  }
              })
              .catch((err)=>{
                  console.log(err)
              })
              this.setState({
                visibleChange: false,
              });
            }
        })
    }
    render(){
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;

    return(
        <div style={{display:'inline-block'}}>

            <Button style={{marginRight:'10px'}} type='default'
            size='small' onClick={this.showModalChange}>修改</Button>
            :""}
            <Modal
            title="修改"
            visible={this.state.visibleChange}
            onOk={this.handleOkChange}
            onCancel={this.handleCancel}
            okText='确认'
            cancelText= '取消'
            >
                <Form layout="inline">
                    <FormItem
                    label='权限名称'
                    style={{marginBottom:'20px'}}
                    >
                    {getFieldDecorator('privilege_name', {
                        rules: [{ required: true, message: '请输入权限名称!' }],
                    })(
                        <Input style={{width:350}}/>
                    )}
                    </FormItem>
                    <FormItem
                    label='权限地址'
                    >
                    {getFieldDecorator('privilege_route', {
                        rules: [{ required: true, message: '请输入权限地址!' }],
                    })(
                        <Input style={{width:350}}/>
                    )}
                    </FormItem>
                </Form>
            </Modal>
        </div>
        )
    }
}
const UserRoleChanges = Form.create()(UserRoleChange)
